<script setup>
defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})
</script>

<template>
  <section class="alarm-record">
    <UiAutoScroll :list="data" :speed="3" :wait-time="2000" :single-height="320">
      <div v-for="(item, index) in data" :key="index" class="alarm-record__item">
        <div class="alarm-record__wrap">
          <div class="alarm-record__row">
            <span class="label">时间 :</span>
            <div class="value">
              {{ item.alarmTime || '--' }}
            </div>
          </div>
          <div class="alarm-record__row">
            <span class="label">名称 :</span>
            <div class="value">
              {{ item.alarmName || '--' }}
            </div>
          </div>
          <div class="alarm-record__row">
            <span class="label">内容 :</span>
            <div class="value">
              <n-ellipsis style="max-width: 100%">
                {{ item.alarmContent || '--' }}
                <template #tooltip>
                  <div style="max-width: 320px;word-break: break-word;">
                    {{ item.alarmContent }}
                  </div>
                </template>
              </n-ellipsis>
            </div>
          </div>
        </div>
      </div>
    </UiAutoScroll>
  </section>
</template>

<style lang='scss' scoped>
.alarm-record {
  height: 100%;
  padding: 0 0 20px;

  &__item {
    height: 95px;
    margin-top: 20px;
    background: linear-gradient(90deg,rgb(115 163 204 / 20%), rgb(115 163 204 / 0%) 100%);
    border: 1px solid #73c3fd;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgb(115 195 253 / 20%);
  }

  &__wrap {
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 20px;
  }

  &__row {
    display: flex;
    line-height: 25px;

    .label {
      width: fit-content;
    }

    .value {
      flex: 1;
      min-width: 0;
      margin-left: 5px;
    }
  }

}
</style>
